<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<meta name="robots" content="noindex,follow">
	<script src="../lib/jquery.js" type="text/javascript"></script>
	<script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>

	<link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.fancytree.js" type="text/javascript"></script>
	<script src="sample.js" type="text/javascript"></script>
	<title>Fancytree - Example Browser</title>

<style type="text/css">
body {
	background-color: #39414A;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: smaller;
	background-image: url("nav_bg.png");
	background-repeat: repeat-x;
}
.fancytree-title {
	color: white;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
div#tree {
	position: absolute;
	height: 95%;
	width: 95%;
	padding: 5px;
	margin-right: 16px;
}
ul.fancytree-container {
	height: 100%;
	width: 100%;
	background-color: transparent;
/*
	border-radius: 15px;
	box-shadow: inset 0px 2px 13px #999;
*/
}
ul.fancytree-container a {
	color: white;
	border: 1px solid transparent;
	background-color: transparent;
}
ul.fancytree-container a:hover {
	background-color: transparent;
}
ul.fancytree-container a:focus, span.fancytree-focused a:link {
	background-color: gray;
}
.fancytree-title:hover,
span.fancytree-active .fancytree-title {
	color: #39414A;
}
</style>

<script type="text/javascript">
	$(function(){
		// --- Initialize sample trees
		$("#tree").fancytree({
			autoFocus: true,
			minExpandLevel: 2,
			clickFolderMode: 3, // expand with single click
			autoCollapse: true,
			tabbable: false, // we don't want the focus frame
			focus: function(e, data) {
				var node = data.node;
				// Auto-activate focused node after 1 second
				if(node.data.href){
					node.scheduleAction("activate", 1000);
				}
			},
			blur: function(e, data) {
				data.node.scheduleAction("cancel");
			},
//            activate: function(e, data){
			click: function(e, data){ // handle click instead of activate, to allow re-loads
				var node = data.node;
//            alert("node.data=" + JSON.stringify(node.data));
				if(node.data.href){
					window.open(node.data.href, node.data.target);
				}
			}
		});
	});
</script>

</head>

<body>
	<div id="tree">
	<ul>
	<li class="folder expanded">Documentation
		<ul>
		<li><a target="_blank" href="../doc/tutorial.html">Tutorial&circ;</a>
		<li><a target="content" href="../doc/faq.html">FAQ</a>
		<li><a target="content" href="../doc/howto.html">Howtos</a>
		<li><a target="_blank" href="../doc/jsdoc/index.html">API reference&circ;</a>
		<li><a target="_blank" href="http://fancytree.googlecode.com">Project page&circ;</a>
		<li><a target="_blank" href="http://jsfiddle.net/mar10/4GjRv/">Fiddle&circ;</a>
		</ul>
	<li class="folder expanded"> Examples
		<ul>
			<li><a target="content" href="welcome.html">Welcome</a>
			<li><a target="content" href="sample-default.html">Default options</a>
			<li><a target="content" href="sample-source.html">Initialization</a>
			<li><a target="content" href="sample-events.html">Event handling</a>
			<li><a target="content" href="sample-configurator.html">Option configurator</a>
			<li><a target="content" href="sample-iframe.html">URL navigation and &lt;iframe></a>
			<li><a target="content" href="sample-api.html">Programming API</a>
			<li><a target="content" href="sample-select.html">Checkbox &amp; select</a>
			<li><a target="content" href="sample-theming.html">Theming</a>
<!--
			<li><a target="content" href="sample-quick.html">Init from JS object</a>
			<li><a target="content" href="sample-init-lazy.html">Init from external data</a>
			<li><a target="content" href="sample-select.html">Checkbox &amp; select</a>
			<li><a target="content" href="sample-theming.html">Theming</a>
			<li><a target="content" href="sample-persist.html">Persistence</a>
			<li><a target="content" href="sample-events.html">Event handling</a>
			<li><a target="content" href="sample-effects.html">Effects</a>
			<li class="folder">Drag'n'drop
				<ul>
				<li><a target="content" href="sample-dnd.html">Drag'n'drop</a>
				<li><a target="content" href="sample-dnd2.html">Drag'n'drop 2</a>
				<li><a target="content" href="sample-dnd3.html">Drag'n'drop 3</a>
				</ul>
			<li><a target="content" href="sample-contextmenu.html">Context menu, Copy/paste</a>
			<li><a target="content" href="sample-minexpand.html">Fixed expand level</a>
			<li><a target="content" href="sample-lazy.html">Lazy loading</a>
			<li><a target="content" href="sample-form.html">Embed in forms</a>
			<li><a target="content" href="sample-multiline.html">Large nodes</a>
-->
			<li><a target="content" href="sample-form.html">Embed in forms</a>
			<li class="folder">Extensions
				<ul>
				<li><a target="_blank" href="sample-ext-persist.html">Persist&circ;</a>
				<li><a target="content" href="sample-ext-dnd.html">Drag'n'drop</a>
				<li><a target="content" href="sample-ext-table.html">Table</a>
				<li><a target="content" href="sample-ext-columnview.html">Column view</a>
				<li><a target="content" href="sample-ext-themeroller.html">Themeroller</a>
				<li><a target="content" href="sample-ext-filter.html">Filter</a>
				<li><a target="content" href="sample-ext-menu.html">Context menu</a>
				</ul>
			<li class="folder">Tweaks
				<ul>
				<li><a target="content" href="sample-accordion.html">Accordion</a>
				<li><a target="content" href="sample-contextmenu.html">Context menu, Copy/paste</a>
				<li><a target="content" href="sample-inline-edit.html">Edit nodes</a>
				<li><a target="content" href="sample-rtl.html">RTL</a>
				<li><a target="content" href="sample-form.html">Embed in forms</a>
				<li><a target="content" href="sample-multiline.html">Large nodes</a>
				</ul>
			<li class="folder">Test
				<ul>
				<li><a target="_blank" href="../test/unit/test-core.html">Core unit tests&circ;</a>
				<li><a target="_blank" href="../test/unit/test-jQuery-latest.html">Core unit tests (latest jQuery)&circ;</a>
				<li><a target="_blank" href="../test/unit/test-jQuery-legacy.html">Core unit tests (oldest jQuery)&circ;</a>
				<li><a target="_blank" href="../test/unit/test-jQuery-20.html">Core unit tests (jQueryUI 2.0)&circ;</a>
				<li><a target="content" href="test-ext-dnd.html">Drag'n'drop</a>
				<li><a target="content" href="test-bench.html">Benchmark large trees</a>
				<li><a target="content" href="sample-pyserver.html">Local server</a>
				<li class="folder">DTD
					<ul>
					<li><a target="content" href="test-dtd-none.html">No DTD</a>
					<li><a target="content" href="test-dtd-html4-transitional.html">HTML4 transitional</a>
					<li><a target="content" href="test-dtd-html4-strict.html">HTML4 strict</a>
					<li><a target="content" href="test-dtd-html5.html">HTML5</a>
					<li><a target="content" href="test-dtd-xml-transitional.html">XHTML transitional</a>
					<li><a target="content" href="test-dtd-xml-strict.html">XHTML strict</a>
					</ul>
				</ul>
		</ul>
	</ul>
	</div>
</body>
</html>
